<template>
  <div class="infoBox">
    <div class="top">
      <div class="avater">
        <img :src="LoserDetail.l_photos" class="img" />
      </div>
      <div class="loserInfos">
        <div class="title">个人信息</div>
        <div class="item">
          <div class="label">姓名</div>
          <div class="con">{{ LoserDetail.l_name }}</div>
          <div class="label">性别</div>
          <div class="con">{{ LoserDetail.l_sex }}</div>
        </div>
        <div class="item">
          <div class="label">出生日期</div>
          <div class="con">
            {{ utils.ymd(LoserDetail.l_birth_date) }}
          </div>
          <div class="label">出生地址</div>
          <div class="con">{{ LoserDetail.l_birth_addr }}</div>
        </div>
        <div class="item">
          <div class="label">失踪日期</div>
          <div class="con">{{ utils.ymd(LoserDetail.l_miss_date) }}</div>
          <div class="label">失踪地址</div>
          <div class="con">{{ LoserDetail.l_miss_addr }}</div>
        </div>
        <div class="item">
          <div class="label">联系人</div>
          <div class="con">{{ LinkDetail?.m_name }}</div>
          <div class="label">关系</div>
          <div class="con">{{ LinkDetail?.m_relat_l }}</div>
        </div>
        <div class="item">
          <div class="label">手机号</div>
          <div class="con">{{ LinkDetail?.m_phone }}</div>
          <div class="label">联系地址</div>
          <div class="con">{{ LinkDetail?.m_addr }}</div>
        </div>
      </div>
    </div>
    <div class="descript">
      <div class="chara">特征描述：</div>
      <span>{{ LoserDetail.l_descript }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import utils from "@/utils/utils";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getDetail } from "@/server/loser";

const route = useRoute();
const id = ref<any>(0);
const LoserDetail = ref<any>([]);
const LinkDetail = ref<any>([]);
onMounted(async () => {
  id.value = route.query?.id;
  await getOneInfos(id.value);
});

const getOneInfos = (id: number) => {
  getDetail(id).then((res: any) => {
    LoserDetail.value = res;
    LinkDetail.value = res.linkmans[0];
  });
};
</script>

<style scoped lang="less">
.infoBox {
  width: 65%;
  margin: 100px auto;
  padding: 5px;
  box-shadow: 0 0 5px 5px rgb(150, 142, 142);
  border-radius: 10px;
  .top {
    display: flex;
    .avater {
      width: 30%;
      height: auto;
      .img {
        width: 100%;
        height: 100%;
        border-radius: 10px 0 0 0;
      }
    }
    .loserInfos {
      flex: 1;
      box-sizing: border-box;
      .title {
        background-color: gray;
        text-align: center;
        font-size: 36px;
        padding: 5px 0;
        color: #fff;
        border-radius: 0 10px 0 0;
      }
      .item {
        display: grid;
        font-size: 18px;
        grid-template-columns: repeat(4, 1fr);
        border-radius: 10px;
        .label {
          background-color: rgb(210, 206, 206);
          border: 1px solid;
          padding: 20px 10px;
          font-weight: bolder;
        }
        .con {
          // background-color: red;
          padding: 20px 10px;
          border: 1px solid;
        }
      }
    }
  }
  .descript {
    // background-color: pink;
    font-size: 18px;
    padding: 15px;
    border: 1px solid;
    border-radius: 0 0 10px 10px;
    .chara {
      font-weight: bolder;
    }
  }
}
</style>
